<template>
  <div class="service-container">
    <div class="img1-container">
      <img src="@assets/img/service/img1.jpg" class="hidden-xs" />
      <img src="@assets/img/service/img1-wap.jpg" class="visible-xs-inline" />
    </div>

    <div class="img2-container anitmate-container text-center por">
      <div class="poa l0 t0" style="z-index: -1">
        <img src="@assets/img/service/img2.jpg" class="hidden-xs" />
        <img src="@assets/img/service/img2-wap.jpg" class="visible-xs-inline" />
      </div>
      <div class="title">Overseas Spare Parts Dealer Recruit</div>
      <img src="@assets/img/service/logo.png" alt="" class="logo" />
      <div class="text">
        If you are interested in JAC genuine spare parts, accessories or oils
        and want to be a part of JAC spare parts family, don't hesitate to send your company introduction and qualification to
        jacparts3@jac.com.cn or go to our alibaba on-line shop:
      </div>

      <div class="red">https://jacparts.en.alibaba.com/</div>
    </div>
    <div class="img3-container anitmate-container">
      <img src="@assets/img/service/img3.jpg" />
    </div>

    <div class="img4-container clearfix anitmate-container">
      <div class="title">JAC Spare Parts Team Introduction</div>
      <div class="animate-img w100 img">
        <img src="@assets/img/service/img4.jpg" class="hidden-xs" />
        <img src="@assets/img/service/img4-wap.jpg" class="visible-xs-inline" />
      </div>

      <div class="text">
        <p class="title pl5">Asia and Gulf sales Section</p>
        <p>Contact:jacparts3@jac.com.cn</p>
        <p class="title pl5">Africa Sales Section</p>
        <p>Contact:jacparts5@jac.com.cn</p>
        <p class="title pl5">Europe and America Sales Section</p>
        <p>Contact:jacparts4@jac.com.cn</p>
        <p class="title pl5">PDC Sales Section</p>
        <p>Contact:jacparts1@jac.com.cn</p>
      </div>
    </div>
    <div class="img5-container anitmate-container">
      <div class="title1">Three-level Spare Parts Guarantee System</div>
      <div class="title2">
          In order to guarantee that every customer could be well serviced with
          correct spare parts on time, JAC has setup
        three-level spare parts guarantee system.
      </div>
      <div class="por text-container clearfix">
        <div class="line1">
          <img src="@assets/img/service/line.png" alt="">
        </div>
        <div class="area1 pull-left">
          <div class="text-center num-content wap-flex">
            <div class="num">1</div>
            <div class="num-text">First level</div>
          </div>
          <div class="text-area">
            <p class="bold">JAC Headquarter Central Warehouse</p>
            JAC central warehouses, located in Hefei, China
          </div>
        </div>
        <div class="area2 pull-left">
          <div class="text-center num-content wap-flex">
            <div class="num">2</div>
            <div class="num-text">Second level</div>
          </div>
          <div class="text-area">
            <p class="bold">JAC Regional Spare Parts Distribution Center</p>
            <div>
              Regional spare parts distribution
              center that JAC established at overseas.
            </div>
            Panama Sparte parts center has
            been built at Colon free zone and
            opened in 2015 to service all America markets. Second overseas
            spare parts center is considered to
            be built in Middle East.
          </div>
        </div>
        <div class="area3 pull-left">
          <div class="text-center num-content wap-flex">
            <div class="num">3</div>
            <div class="num-text">Third level</div>
          </div>
          <div class="text-area">
            <p class="bold">Distributor Central Warehousev at its Distribution Territory</p>
            National spare parts
            warehouse that owned and
            operated by each distributor
            at its territory.
          </div>
        </div>
      </div>
    </div>
    <div class="img6-container anitmate-container">
      <div class="title1">
        Infrastructure
      </div>
      <div class="title2">
        JAC spare parts central warehouse in Hefei, China and reginoal spare
        parts distribution center in Colon, Panama.
      </div>
      <div class="img-content clearfix">
        <div class="item">
          <div class="img animate-img">
            <img src="@assets/img/service/img5-1.jpg" />
          </div>
          <div class="text">
            LDT spare parts central warehouse:16000m<sup>2</sup>, 26000 items inventory.
          </div>
        </div>
        <div class="item">
          <div class="img animate-img">
            <img src="@assets/img/service/img5-2.jpg" />
          </div>
          <div class="text">
            HDT spare parts central warehouse:6650m<sup>2</sup>, 13000 items inventory.
          </div>
        </div>
        <div class="item">
          <div class="img animate-img">
            <img src="@assets/img/service/img5-3.jpg" />
          </div>
          <div class="text">
            PV spare parts central warehouse:22000m<sup>2</sup>32000 items inventory.
          </div>
        </div>
        <div class="item">
          <div class="img animate-img">
            <img src="@assets/img/service/img5-4.jpg" />
          </div>
          <div class="text">
            overseas market spare parts warehouse
          </div>
        </div>
      </div>
    </div>
    <div class="img7-container anitmate-container">
      <div class="title1">Our Products</div>
      <div class="title2">Genuine Spare parts</div>
      <img src="@assets/img/service/img6.jpg" class="hidden-xs" />
      <img src="@assets/img/service/img6-wap.jpg" class="visible-xs-inline" />
    </div>
    <div class="img8-container anitmate-container">
      <div class="title2">Genuine Accessories</div>
      <img src="@assets/img/service/img7.jpg" class="hidden-xs" />
      <img src="@assets/img/service/img7-wap.jpg" class="visible-xs-inline" />
    </div>
    <div class="img9-container anitmate-container">
      <div class="title1">JAC Special Use Oils: Different Grade of Lubricant Oils.  </div>
      <div class="title2">Genuine parts package</div>
      <div class="img-content clearfix">
        <div class="item">
          <img src="@assets/img/service/img8-1.jpg" />
          <div class="text">
            Passenger Vehicle spare parts package
          </div>
        </div>
        <div class="item">
          <img src="@assets/img/service/img8-2.jpg" />
          <div class="text">
            Commercial vehicle spare parts package
          </div>
        </div>
      </div>
    </div>
    <div class="img10-container anitmate-container">
      <div class="title">
        Genuine spare parts anti-fake enquiry
      </div>
      <div class="text">
        JAC genuine spare parts can be verified through following three ways
        (support any mobile phone QR code scanner).
      </div>
      <img src="@assets/img/service/img9.jpg" class="hidden-xs" />
      <div class="clearfix">
        <img src="@assets/img/service/img9-1.png" class="visible-xs-inline" />
        <div class="text1 pull-left">
          Verifying by scanning the QR code on anti-counterfeit label, it will lead you to the enquiring result.
        </div>
        <img src="@assets/img/service/img9-2.png" class="visible-xs-inline" />
        <div class="text2 pull-left">
          Uncover the QR code on anti-counterfeit
          label and you will see another QR code
          and digital code. Scanning the bottom
          QR code, it will lead you to the same enquiring result as your first enquiry.
        </div>
        <img src="@assets/img/service/img9-3.png" class="visible-xs-inline" />
        <div class="text3 pull-left">
          Please type in the 16 bit verification code.
        </div>
      </div>
    </div>
    <div class="img11-container anitmate-container">
      <div class="title">
        Enquire result indication
      </div>
      <div class="text">
          The verification result by scanning QR code is displayed as this
          picture. There are five sections and the
          result by verifying with digital code only displays the first two ones.
      </div>
      <div class="title">
        System has been setup to verify by totally 4 times. Different enquiry
        will get you result with slight difference.
      </div>
      <div class="clearfix">
        <div class="pull-left">
          <img src="@assets/img/service/img10.jpg" />
        </div>
        <div class="text-area pull-left">
          <div class="text">
              <span>First inquiry</span>: the code you searched is for JAC
              international genuine parts, please ensure using. t
          </div>
          <div class="text">
              <span>Second inquiry</span>: the code you searched is for JAC
              international genuine parts. This
              is 2 inquiry. The first inquiry time is at ….. If the time is
              different with your real inquiry
              time, be attention whether the parts is faked. Any question,
              please feel free to contact
              JAC dealer there or contact JAC directly for further information.
          </div>
          <div class="text">
              <span>Third inquiry</span>: the code you searched is for JAC
              international genuine parts. This is 3
              inquiry. The first inquiry time is at ….. If the time is different
              with your real inquiry time,
              be attention whether the parts is faked. Any question, please feel
              free to contact JAC
            dealer there or contact JAC directly for further information.
          </div>
          <div class="text">
              <span>Fourth inquiry</span>: the code you searched is for JAC
              international genuine parts. This is
              4 inquiry. The first inquiry time is at ….. If the time is
              different with your real inquiry time,
              be attention whether the parts is faked. Any question, please feel
              free to contact JAC
            dealer there or contact JAC directly for further information.
          </div>
          <div class="text">
              <span>Fifth or more inquiry</span>: you have exceeded to the
              stated inquiry times. Please be attention whether the parts are faked. Any question, please feel
              free to contact JAC dealer there or contact JAC directly for further information.
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mix from "@mixins/mixin";

export default {
  name: "BrandService",
  mixins: [mix]
};
</script>

<style lang="scss" scoped>
@import "~@assets/scss/func.scss";

.service-container {
  .img1-container {
    margin-bottom: vw(163);
  }
  .img2-container {
    height: vw(927);
    margin-bottom: vw(128);
    padding-top: vw(130);
    color: #fff;

    .title {
      font-family: Cormorant-Bold;
      font-size: vw(90);
      line-height: 1;
      margin-bottom: vw(234);
    }
    .logo {
      width: vw(482);
      height: vw(190);
      margin-bottom: vw(78);
    }
    .text {
      font-family: Aileron-Regular;
      font-size: vw(30);
      line-height: vw(43);
      width: vw(1660);
      margin: auto;
    }
    .red {
      color: #cc000d;
      font-family: Aileron-Heavy;
      font-size: vw(36);
      font-weight: bold;
    }
  }
  .img3-container {
    width: vw(1807);
    margin: 0 vw(63) vw(104) vw(50);
  }
  .img4-container {
    font-family: Helvetica-Light;
    font-size: vw(29);
    margin-bottom: vw(162);
    .title {
      font-family: Cormorant-Bold;
      font-size: vw(61);
      line-height: 1;
    }
    .img {
      width: vw(951);
      height: vw(815);
      float: left;
      margin-top: vw(36);
      margin-left: vw(116);
    }
    .text {
      float: left;
      margin-top: vw(117);
      width: vw(730);
      height: vw(685);
      margin-left: vw(8);
      .pl5 {
        padding-left: vw(25);
      }
      p:not(.title) {
        margin-bottom: vw(70);
      }
      .title:before {
        content: '-';
        display: inline-block;
      }
    }
  }
  .img5-container {
    line-height: 1;
    margin-bottom: vw(167);
    .line1 {
      width: vw(1192);
      height: vw(205);
      position: absolute;
      top: vw(105);
      left: vw(251);
    }
    .title1 {
      font-family: Cormorant-Bold;
      font-size: vw(60);
      margin-bottom: vw(39);
      padding-left: vw(114);
    }
    .title2 {
      font-family: Aileron-Bold;
      font-weight: bold;
      font-size: vw(30);
      height: vw(82);
      width: vw(1580);
      padding-left: vw(112);
    }
    .text-container {
      .num {
        font-family: Helvetica-Bold;
        font-size: vw(180);
        opacity: 0.08;
        font-weight: bold;
      }
      .num-text {
        font-family: Aileron-Bold;
        font-size: vw(36);
        font-weight: bold;
      }
      .text-area {
        font-family: Aileron-Regular;
        font-size: vw(31);
        border-top: 1px solid #cc000c;
        line-height: vw(52);
        .bold {
          font-family: Aileron-Bold;
          font-size: vw(31);
          font-weight: bold;
        }


      }
      .area1 {
        margin-left: vw(107);
        margin-top: vw(188);
        .num-content {
          width: vw(190);
          margin-left: vw(65);
          .num {
            margin-bottom: vw(25);
          }
          .num-text {
            margin-bottom: vw(27);
          }
        }
        .text-area {
          width: vw(411);
          height: vw(183);
          padding-left: vw(6);
        }
      }
      .area2 {
        margin-left: vw(156);
        margin-top: vw(127);
        .num-content {
          width: vw(230);
          margin-left: vw(33);
          .num {
            margin-bottom: vw(24);
          }
          .num-text {
            margin-bottom: vw(36);
          }
        }
        .text-area {
          width: vw(500);
          height: vw(548);
          padding-top: vw(31);
        }
      }
      .area3 {
        margin-left: vw(166);
        margin-top: vw(57);
        .num-content {
          width: vw(191);
          margin-left: vw(52);
          .num {
            margin-bottom: vw(32);
          }
          .num-text {
            margin-bottom: vw(43);
          }
        }
        .text-area {
          width: vw(457);
          height: vw(413);
          padding-top: vw(29);
          p {
            font-size: vw(37);
            margin-bottom: vw(22);
          }
        }
      }
    }
  }
  .img6-container,
  .img7-container,
  .img8-container,
  .img9-container {
    .title1 {
      font-family: Cormorant-Bold;
      font-size: vw(60);
      margin-bottom: vw(53);
      padding-left: vw(114);
    }
    .title2 {
      font-family: Aileron-Bold;
      font-weight: bold;
      font-size: vw(30);
      margin-bottom: vw(56);
      padding-left: vw(113);
    }
  }
  .img6-container {
    line-height: 1;
    margin-bottom: vw(168);
    .img-content {
      padding-left: vw(112);
      .item {
        width: vw(818);
        float: left;
        .img {
          margin-bottom: vw(26);
        }
        .text {
          font-family: Aileron-Regular;
          font-size: vw(31);
          line-height: vw(43);
        }
        &:nth-child(2),
        &:nth-child(4) {
          margin-left: vw(60);
        }
        &:nth-child(1),
        &:nth-child(2) {
          margin-bottom: vw(70);
        }
      }
    }
  }
  .img7-container,
  .img8-container {
    margin-bottom: vw(168);
    img {
      margin-left: vw(112);
      width: vw(1696);
    }
  }
  .img8-container {
    margin-bottom: vw(499);
  }
  .img9-container {
    margin-bottom: vw(167);
    .title2 {
      margin-bottom: vw(118);
    }
    .img-content {
      padding-left: vw(299);
      .item {
        float: left;
        width: vw(681);
        &:last-child {
          margin-left: vw(103);
        }
        .text {
          font-family: Aileron-Regular;
          font-size: vw(30);
          line-height: 1;
          margin-top: vw(33);
        }
      }
    }
  }
  .img10-container,
  .img11-container {
    font-family: Aileron-Regular;
    font-size: vw(30);
    line-height: 1;
    padding-left: vw(113);
    margin-bottom: vw(168);
    .title {
      font-family: Aileron-Bold;
      font-weight: bold;
      font-size: vw(30);
      margin-bottom: vw(56);
    }

  }
  .img10-container {
    img {
      width: vw(1611);
      margin-top: vw(46);
      margin-bottom: vw(63);
    }
    .text1,
    .text2,
    .text3 {
      line-height: vw(35);
    }
    .text1 {
      width: vw(552);
      height: vw(102);
    }
    .text2 {
      width: vw(537);
      margin-left: vw(149);
    }
    .text3 {
      width: vw(290);
      height: vw(60);
      margin-left: vw(128);
    }
  }
  .img11-container {
    .title:first-child {
      margin-bottom: vw(50);
    }
    .text {
      margin-bottom: vw(56);
      line-height: vw(33);
      max-width: vw(1359);
    }
    img {
      width: vw(526);
    }
    .text-area {
      margin-left: vw(23);
      margin-top: vw(168);
      height: vw(749);
      width: vw(1142);
      span {
        font-family: Aileron-Heavy;
        color: #cc000d;
        font-weight: bold;
      }
      .text {
        line-height: vw(36);
        margin-bottom: vw(32);
      }
    }
  }
}
@media screen and (max-width: 767px) {
  .service-container {
    .img1-container {
      margin-bottom: wp(48);
    }
    > .anitmate-container {
      padding: 0 wp(40);
      width: 100%;
    }
    .img2-container {
      width: wp(670);
      height: wp(765);
      margin: 0 auto wp(48);
      padding-top: wp(30);

      .title {
        font-size: wp(60);
        line-height: wp(60);
        margin-bottom: wp(80);
      }

      .logo {
        width: wp(221);
        height: wp(87);
        margin-bottom: wp(70);
      }

      .text {
        font-size: wp(28);
        line-height: wp(38);
        width: wp(615);
        margin: auto;
      }

      .red {
        font-size: wp(48);
        line-height: wp(60);
        word-break: break-word;
      }
    }

    .img3-container {
      width: 100%;
      margin: 0 0 wp(48);
    }

    .img4-container {
      font-size: wp(28);
      margin-bottom: wp(68);

      .title {
        width: 100%;
        font-size: wp(48);
        font-weight: bold;
        line-height: wp(60);
      }

      .img {
        width: 100%;
        height: auto;
        float: left;
        margin-top: 0;
        margin-left: 0;
      }

      .text {
        float: left;
        margin-top: 0;
        width: 100%;
        height: wp(434);
        margin-left: 0;
        .title {
          font-size: wp(36);
          line-height: wp(40);
          &:before {
            content: '';
            display: inline-block;
            width: wp(68);
            height: wp(16);
            margin-right: wp(25);
            background: #B8D000;
            transform: translateY(wp(-3));
          }
        }
        .pl5 {
          padding-left: 0;
        }

        p:not(.title) {
          margin-bottom: vw(70);
        }
      }
    }

    .img5-container {
      margin-bottom: wp(81);

      .line1 {
       display: none;
      }

      .title1 {
        font-size: wp(60);
        margin-bottom: wp(39);
        padding-left: 0;
      }

      .title2 {
        font-size: wp(28);
        height: auto;
        width: 100%;
        padding-left: 0;
        line-height: wp(43);
      }

      .text-container {
        .num {
          flex: none;
          font-size: wp(180);
        }

        .num-text {
          font-size: wp(36);
          flex: auto;
          text-align: left;
        }

        .area1,
        .area2,
        .area3 {
          .text-area {
            font-size: wp(28);
            border-top: none;
            line-height: wp(52);

            .bold {
              font-size: wp(28);
            }
          }
          margin-left: 0;
          margin-top: 0;

          .num-content {
            width: 100%;
            margin-left: 0;

            .num {
              margin-bottom: 0;
            }

            .num-text {
              margin-bottom: 0;
            }
          }

          .text-area {
            width: 100%;
            height: auto;
            padding-left: 0;
          }
        }
      }
    }

    .img6-container,
    .img7-container,
    .img8-container,
    .img9-container {
      .title1 {
        font-size: wp(60);
        margin-bottom: 0;
        padding-left: 0;
      }

      .title2 {
        font-size: wp(28);
        line-height: wp(43);
        margin-bottom: wp(48);
        padding-left: 0;
      }
    }

    .img6-container {
      margin-bottom: 0;
      .img-content {
        padding-left: 0;

        .item {
          width: 100%;
          float: left;
          margin-bottom: wp(48);
          .img {
            margin-bottom: wp(48);
          }

          .text {
            font-size: wp(28);
            line-height: wp(43);

          }

          &:nth-child(2),
          &:nth-child(4) {
            margin-left: 0;
          }

          &:nth-child(1),
          &:nth-child(2) {
            margin-bottom: wp(48);
          }
        }
      }
    }

    .img7-container,
    .img8-container {
      margin-bottom: wp(48);

      img {
        margin-left: 0;
        width: 100%;
      }
    }

    .img8-container {
      margin-bottom: wp(68);
    }

    .img9-container {
      margin-bottom: wp(50);

      .title2 {
        margin-bottom: wp(66);
      }

      .img-content {
        padding-left: 0;

        .item {
          float: left;
          width: 100%;
          img {
            transform: translateX(wp(80));
          }
          &:last-child {
            margin-left: 0;
          }
          &:first-of-type .text {
            margin-bottom: wp(76);
          }
          .text {
            text-align: center;
            font-size: wp(28);
            line-height: wp(43);
            margin-top: wp(10);

          }
        }
      }
    }

    .img10-container,
    .img11-container {
      font-size: wp(28);
      line-height: wp(43);
      padding-left: wp(40);
      margin-bottom: wp(48);

      .title {
        font-size: wp(28);
        margin-bottom: vw(32);
      }

    }

    .img10-container {
      img {
        margin-top: vw(46);
        margin-bottom: vw(63);
      }

      .text1,
      .text2,
      .text3 {
        line-height: wp(43);
        width: 100%;
        height: auto;
        margin-left: 0;
        text-align: center;
      }
    }

    .img11-container {
      margin-bottom: wp(250);
      .title:first-child {
        margin-bottom: wp(30);
      }

      .text {
        margin-bottom: wp(47);
        line-height: wp(43);
        max-width: 100%;
      }

      img {
        width: 100%;
      }

      .text-area {
        margin-left: 0;
        margin-top: wp(48);
        height: auto;
        width: 100%;

        .text {
          line-height: wp(43);
          margin-bottom: wp(32);
        }
      }
    }
  }
}
</style>
